<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录页面</title>
    <link rel="stylesheet" href="./static/element-plus/index.css">
    <script src="./static/js/vue.global.js"></script>
    <script src="./static/element-plus/index.full.js"></script>
</head>
<body>
    <div id="app">
        <el-container style="height: 100vh;">
            <el-main style="display: flex; justify-content: center; align-items: center;">
                <el-card style="width: 300px;">
                    <el-form :model="loginForm" label-width="80px">
                        <el-form-item label="用户名">
                            <el-input v-model="loginForm.username" placeholder="请输入用户名"></el-input>
                        </el-form-item>
                        <el-form-item label="密码">
                            <el-input type="password" v-model="loginForm.password" placeholder="请输入密码"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="login">登录</el-button>
                        </el-form-item>
                    </el-form>
                </el-card>
            </el-main>
        </el-container>
    </div>
    <script>
        var App = {
            data() {
                return {
                    loginForm: {
                        username: "",
                        password: ""
                    }
                };
            },
            methods: {
                login() {
                    if (this.loginForm.username === "zhx" && this.loginForm.password === "0521") {
                        // 将登录状态和用户名存储到 localStorage
                        localStorage.setItem("isLogin", true);
                        localStorage.setItem("username", this.loginForm.username);
                        // 跳转到个人主页
                        window.location.href = "/person.html";
                    } else {
                        this.$message.error("用户名或密码错误！");
                    }
                }
            }
        };
        Vue.createApp(App).use(ElementPlus).mount("#app");
    </script>
</body>
</html>